<template>
	<view class="cancel-refund-page">
		<view
			v-if="orderInfo.canRefund === '1'"
			class="refund-address"
		>
			<view class="header-title">
				<view class="title-label">退货信息</view>
				<view
					class="title-right"
					@click="chooseAddress"
				>
					<text>修改</text>
					<image class="icon-more" src="https://s1.huishoubao.com/static/web/recycle/icon_orders_more.png"></image>
				</view>
			</view>
			<view class="refund-content">
				<view v-if="hasRefundAddress" class="address-info">
					<view class="name-phone">
						<view class="name">{{ refundAddress.userName }}</view>
						<view class="phone">{{ refundAddress.tel }}</view>
					</view>
					<view class="detail">{{ refundAddress.province }}{{ refundAddress.city }}{{ refundAddress.area }}{{ refundAddress.address }}</view>
				</view>
				<view v-else class="no-address">请选择退货地址</view>
			</view>
		</view>
		<view class="cancel-reason">
			<view class="header-title">
				<view class="title-label">取消原因</view>
			</view>
			<view class="reason-content">
				<scroll-view
					scroll-y="true"
					class="reason-scroll"
				>
					<view class="reason-list">
						<view
							v-for="(reason, index) in reasonist"
							:key="index"
							class="reason-item"
							@click="selectReason = reason"
						>
							<view class="reason-image">
								<image v-if="reason === selectReason" class="icon-image" src="@/static/images/icon_reason_sel.png"></image>
								<view v-else class="no-select"></view>
							</view>
							<view class="reason-text">{{ reason }}</view>
						</view>
					</view>
				</scroll-view>
			</view>
		</view>
		<view
			v-if="orderInfo.orderNum"
			class="button-content"
		>
			<view
				class="button"
				@click="cancelOrder"
			>
				<text>取消订单</text>
			</view>
			<view
				class="button confirm"
				@click="returnRecycle"
			>
				<text>继续回收</text>
			</view>
		</view>
	</view>
</template>

<script>
export default {
	computed: {
		canCancel () {
			return this.orderInfo.orderNum && (this.orderInfo.canCancel === '1' || this.orderInfo.canRefund === '1')
		},
		hasRefundAddress () {
			return this.refundAddress.userName && this.refundAddress.tel && this.refundAddress.province && this.refundAddress.city && this.refundAddress.area && this.refundAddress.address
		}
	},
	data () {
		return {
			orderNum: '',
			orderInfo: {},
			refundAddress: {},
			reasonist: [],
			selectReason: '',
			loading: false
		}
	},
	methods: {
		/*
		 * 用户订单信息
		*/
		async getOrderDetail () {
			const [res] = await this.$apis.getOrderDetail({
				orderNum: this.orderNum
			})
			if (res._errCode === '0') {
				const orderInfo = res._data || {}
				this.orderInfo = orderInfo
				this.refundAddress = {
					userName: orderInfo.userName,
					tel: orderInfo.tel,
					province: orderInfo.province,
					city: orderInfo.city,
					area: orderInfo.county,
					address: orderInfo.addr
				}
			}
		},
		/*
		 * 取消原因
		*/
		async getReasonList () {
			const [res] = await this.$apis.getCancelReasonList()
			if (res._errCode === '0') {
				this.reasonist = res._data.reasonList || []
			}
		},
		/*
		 * 取消订单
		*/
		async cancelOrder () {
			if (this.loading) return
			if (!this.selectReason) {
				return uni.showToast({
					title: '请选择退货原因',
					icon: 'none'
				})
			}
			if (this.orderInfo.canRefund === '1' && !this.hasRefundAddress) {
				return uni.showToast({
					title: '请选择退货地址',
					icon: 'none'
				})
			}
			if (this.orderInfo.canRefund === '1') {
				return this.refundGoods()
			}
			this.loading = true
			const [res] = await this.$apis.cancelRecycle({
				orderNum: this.orderInfo.orderNum,
				reason: this.selectReason,
			})
			this.loading = false
			this.cancelResult(res)
		},
		/*
		 * 退货
		*/
		async refundGoods () {
			this.loading = true
			const [res] = await this.$apis.refundGoods({
				orderNum: this.orderInfo.orderNum,
				reason: this.selectReason,
				userName: this.refundAddress.userName,
				tel: this.refundAddress.tel,
				province: this.refundAddress.province,
				city: this.refundAddress.city,
				area: this.refundAddress.area,
				address: this.refundAddress.address,
			})
			this.loading = false
			this.cancelResult(res)
		},
		/*
		 * 取消结果
		*/
		cancelResult (res) {
			if (res._errCode === '0') {
				uni.showToast({
					title: '取消成功',
					icon: 'success'
				})
				setTimeout(() => {
					uni.navigateBack()
				}, 1000)
			} else {
				uni.showToast({
					title: res._errStr || '取消失败',
					icon: 'none'
				})
			}
		},
		/*
		 * 修改收货地址
		*/
		chooseAddress () {
			uni.navigateTo({
				url: '/pages/address/list/index',
				events: {
					updateRefundAddressInfo: (addrInfo) => {
						this.refundAddress = {
							userName: addrInfo.data.userName,
							tel: addrInfo.data.tel,
							province: addrInfo.data.provinceName,
							city: addrInfo.data.cityName,
							area: addrInfo.data.areaName,
							address: addrInfo.data.address
						}
					}
				}
			})
		},
		/*
		 * 继续回收
		*/
		returnRecycle () {
			uni.navigateBack()
		}
	},
	onLoad (options) {
		this.orderNum = options.orderNum || ''
		this.getOrderDetail()
		this.getReasonList()
	}
}
</script>

<style lang="scss" scoped>
@import './index.scss';
</style>